import React from 'react'
import { useEffect, useState } from "react"
import axios from 'axios'
import "../style/style.scss"
import { ProductCard, Button } from 'react-vant';
import { SubmitBar, Checkbox } from 'react-vant';
import { Toast } from 'react-vant';
function Shopcar() {
    let [arr, setArr] = useState([])
    let [checkall,setCheckall] =useState(false)
    let [mysum,setmysum] = useState(0)
    useEffect(() => {
        axios.get("/api/shoplist").then(res => {
            console.log(res.data);
            setArr(res.data)
        })
    }, []) //useEffect 第二个参数为一个空数组的时候，模拟类组件的componetDidmounted
    useEffect(()=>{
        let newarr = arr.filter((item)=>item.flag)
       let sum =  newarr.reduce((a,b)=>{
            return a + b.price * b .num
        },0)
        setmysum(sum)
    },[arr])
    let changefn = (e, index) => {
        console.log(e, index);
        let newarr = [...arr]
        newarr[index].flag = e.target.checked 
        setArr(newarr)
        let flag = newarr.every((item)=>{
            return item.flag
        })
        console.log(flag,"flag");
        setCheckall(flag)
    }
    let addfn = (index)=>{
        console.log(index);
        let newarr = [...arr]
        arr[index].num ++
        setArr(newarr)
    }
    let delfn = (index)=>{
        console.log(index);
        let newarr = [...arr]
       
        if (arr[index].num  === 1) {
            Toast.info('您不能在减去了')
            arr[index].num  = 1
        } else {
            arr[index].num --
        }
        setArr(newarr)
    }
    let checkallfn = (e)=>{
        setCheckall(e.target.checked)
        let newarr = [...arr]
        arr.forEach((item=>{
            item.flag = e.target.checked
        }))
        setArr(newarr)
        
    }
    
    return (
        <div className='shopappwrap'>
            <div className='shopcontent'>
            {
                arr && arr.length ? arr.map((item, index) => {
                    return <ProductCard
                        key={index}
                        num={item.num}
                        price={item.price}
                        desc={item.dec}
                        title={item.tit}
                        thumb={item.img}
                        footer={
                            <>
                                <input type="checkbox" checked={item.flag} onChange={(e) => changefn(e, index)} />
                                <Button size="mini" round plain style={{ marginRight: 2 }} onClick={()=>delfn(index)}>
                                    -
                                </Button>
                                <Button size="mini" round plain onClick={()=>addfn(index)}>
                                    +
                                </Button>
                            </>
                        }
                    />
                }) : ""
            }
            </div>
           
            <div className="demo-submit-bar">
                <SubmitBar
                    price={mysum * 100}
                    buttonText="提交订单"
                    tip={
                        <>
                            你的收货地址不支持同城送,
                            <span style={{ color: '#1989fa' }}>修改地址</span>
                        </>
                    }
                >
                    < input type="checkbox" checked={checkall} onChange={checkallfn}/>全选
                </SubmitBar>
            </div>
        </div>
    )
}

export default Shopcar